<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title><!--页面标题-->
</head>
<style>
    /* 3.设计样式 */
    
    /*标题样式*/
    h2{
        text-align: center;/*居中*/
    }
    /*表格样式*/
    table{
        margin: 0 auto;/*居中*/
        height: 300px;/*表格高度*/
    }


</style>
<body>
    <!-- 1.设计表单 -->

    <!--标题-->
    <h2>用户信息注册</h2>

    <!--表单-->
    <form onsubmit="return finish()"><!--提交表单时触发使用finish函数的事件-->

        <!--表单中包括：用户名，密码，性别，学历（本科，专科），自我介绍-->

        <!--为了方便对齐，使用表格标签-->
        <table>
            <tr>
                <td class="title">用户名</td>
                <td>：</td>
                <!--用户名为默认属性文本输入框，失去焦点时触发使用checkUser函数的事件-->
                <td><input name="user" id="user" onblur="checkUser()"></td>
                <td><font color="red">*</font></td>
            </tr>
            <tr>
                <td class="title">密码</td>
                <td>：</td>
                <!--密码输入框属性为password,隐藏密码信息-->
                <td><input name="password" id="password" type="password"></td>
                <td><font color="red">*</font></td>
            </tr>
            <tr>
                <td class="title">性别</td>
                <td>：</td>
                <!--性别只有两个选项，使用单选按钮-->
                <td><input name="sex" type="radio" checked> 男<!--默认选择-->
                    <input name="sex" type="radio"> 女
                </td>
            </tr>
            <tr>
                <td class="title">学历</td>
                <td>：</td>
                <!--学历使用下拉列表-->
                <td>
                    <select>
                        <option name="education">本科</option>
                        <option name="education">专科</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="title">自我介绍</td>
                <td>：</td>
                <!--自我介绍使用下拉框-->
                <td><textarea name="introduce" id="introduce"></textarea></td>
            </tr>
            <tr>
                <!--将表格中3列合并，并居中-->
                <td colspan="4" align="center"><button>提交</button></td>
            </tr>

        </table>
    </form>
    

    <!-- 2.实现功能 -->
    <script>
        
        //实现“输入完用户名后校验只能是"admin"，否则弹框提示错误”功能
        function checkUser(){
            //声明变量用于记录用户名输入框中的值，使用DOM操作
            var user = document.getElementById("user").value;
            //判断用户名是否为admin，如为admin则无事发生，否则弹框
            if(user != "admin"){
                alert("用户名错误")//弹框提示错误
                document.getElementById("user").value="";//将输入框中内容修改为空内容，即清除输入框中内容
            }
        }

        //实现“点击提交执行后执行事件，把自我介绍的内容弹框提示出来”功能
        function finish(){
            //声明变量用于记录用户名输入框中的值，使用DOM操作
            var user = document.getElementById("user").value;
            //声明变量用于记录密码输入框中的值，使用DOM操作
            var password = document.getElementById("password").value;
            //声明变量记录自我介绍的内容，使用DOM操作
            var introduce = document.getElementById("introduce").value;
            //判断两个输入框内容是否为空
            if(user=="" || password==""){
                alert("账号/密码不能为空");
                return false;
            }
            //弹框提示自我介绍的内容
            alert("自我介绍：" + introduce);
            return true;
           
        }

    </script>
    
</body>
</html>